<template>
  <view>
    <!-- 头部 -->
    <view class="top">
      <image class="top-icon"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssfkh4z8xj2d6w5cl41q4ut54wzg0dwnlf65acaa29-1ef5-44e0-a3ec-76fd991386e9"
        @click="toReturn()"></image>
      <view class="top-text">登录注册</view>
    </view>
    <!-- 标题 -->
    <view class="title-box">
      <view class="title-text">
        您好，</br>欢迎来到速裁通
      </view>
      <text class="title-info">区块链电子签约平台</text>
    </view>
    <!-- 验证码登录与忘记密码 -->
    <view class="text-code-password">
      <view @click="toLogin">账号密码登录</view>
    </view>
    <!-- 账号密码 -->
    <view class="phone-box">
      <input class="phone-input" v-model="phone" placeholder="请输入手机号" type="number"/>
    </view>
    
    <view class="code-box">
      <view class="code-inputBox">
        <input class="code-input" v-model="code" maxlength="6" placeholder="请输入验证码" type="number"/>
      </view>
      <view class="code-textBox" :style="number!=''?'pointer-events: none;':''" @click="getCode()">
        {{number}}获取验证码
      </view>
    </view>

    <!-- 登录按钮 -->
    <view class="button-box" @click="login()">登录</view>
    <!-- 注册 -->
    <view class="register-text" @click="toHome">没有账号 立即注册</view>
    <!-- 协议 -->
    <view class="protocol-box">
      <view class="protocol-button" v-if="!isPitchOn" @click="isPitchOn=!isPitchOn"></view>
      <view class="protocol-button1" v-else @click="isPitchOn=!isPitchOn"></view>
      <view class="protocol-text">本人已认真阅读，理解并同意《用户协议》和《隐私协议》</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        number: '',//倒计时
        phone: '', //手机号
        code: '', //验证码
        isShow:true,//是否显示
        isPitchOn:false,//是否同意
        uuid: '', //存储服务器短信验证
      }
    },
    methods: {
      async login(){
        if(this.isPitchOn){
          //整理参数
          let checkType=uni.getStorageSync("checkType");
          let params={
            loginFrom:checkType||2,//1企业,2个人
            phone:this.phone,//手机号
            verificationCode:this.code,//验证码
            verificationUUid:this.uuid,//验证吗uuid
          }
          let res = await this.$http('/auth/loginByUserPhone','post', params)
          console.log('短信登录',res)
          if (res.data.code == 200) {
            uni.setStorageSync('token', res.data.data)
            uni.navigateTo({
              url: '/subpkg/nameLogin/nameLogin'
            })
          } else {
            let title = res.data.msg
            uni.$showMsg(title)
          }
        }else{
          let title ='是否同意协议!'
          uni.$showMsg(title)
        }
       
      },
      async getCode(){
        if(this.phone){
          //倒计时
          this.number = 60
          let interval = setInterval(() => {
            this.number--
            if (this.number == 0) {
              this.number = ''
              clearInterval(interval)
            }
          }, 1000)
          //发送短信
          let param = {
            phone: this.phone
          }
          let res = await this.$http('/im/yunxin/getSmsCode', 'post', param)
          if (res.data.code == 200) {
            this.uuid = res.data.data.uuid
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 1500
            })
          }
        }

      },
      toLogin(){
        uni.redirectTo({
          url:'/pages/login/login'
        })
      },
      toHome(){
        uni.navigateTo({
          url:'/pages/index/index'
        })
      },
      // 返回
      toReturn() {
        uni.navigateBack({
          delta: 1
        })
      },
    }
  }
</script>

<style lang="scss">
  .top {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfiuuy9gq5ln2cg20o0mcbhjgadvp6vxj897f089bb-fcb6-4328-81f6-bacd144e6c50) 100% no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 51rpx;

    .top-icon {
      margin-left: 31rpx;
      width: 20rpx;
      height: 35rpx;
      background-size: 100%;
    }

    .top-text {
      margin-left: 250rpx;
    }
  }
  //标题
  .title-box{
    margin-top: 102rpx;
    margin-left: 89rpx;
    color: #CDAD66;
    .title-text{
      font-size: 48rpx;
      .title-info{
        font-size: 28rpx;
      }
    }
  }
  //验证码登录与忘记密码
  .text-code-password{
    font-size: 24rpx;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 111rpx;
    margin-right: 90rpx;
    margin-top: 70rpx;
    .text-code{}
    .text-password{}
  }
  //账号密码
  .phone-box{
    margin: 38rpx auto 0 auto;
    width: 568rpx;
    height: 84rpx;
    border-radius: 30rpx;
    border: 1rpx #CDAD66 solid;
    display: flex;
    align-items: center;
    .phone-icon{
      width: 35rpx;
      height: 35rpx;
      background-size: 100%;
      margin-left: 42rpx;
      margin-top: 27rpx;
      margin-bottom: 24rpx;
      margin-right: 14rpx;
    }
    .phone-input{
      margin-left: 36rpx;
      font-size: 27rpx;
      width: 500rpx;
      }
  }
  .code-box{
    display: flex;
    margin-top: 50rpx;
    margin-left: 88rpx;
    .code-inputBox{
      display: flex;
      align-items: center;
      width: 348rpx;
      height: 84rpx;
      border: 1rpx #CDAD66 solid;
      border-radius: 30rpx;
      margin-right: 20rpx;
      .code-input{
        font-size: 27rpx;
        margin-left: 35rpx;
      }
    }
    .code-textBox{
      width: 200rpx;
      height: 86rpx;
      background-color: #B2B0AB;
      border-radius: 30rpx;
      font-size: 27rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  //登录按钮
  .button-box{
    width: 570rpx;
    height: 86rpx;
    background-color: #CDAD66;
    border-radius: 30rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 59rpx auto 39rpx auto;
  }
  // 注册提示
  .register-text{
    font-size: 24rpx;
    color: #CDAD66;
    text-align: right;
    margin-right: 91rpx;
  }
  // 协议
  .protocol-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 90rpx;
    .protocol-button{
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
      border: 2rpx #999 solid;
      margin-right: 12rpx;
    }
    .protocol-button1{
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background-color: #CDAD66;
      margin-right: 12rpx;
    }
    .protocol-text{
      font-size: 22rpx;
      color: #999;
    }
  }
</style>
